<template>
  <div>
    <div class="bottomBtn">
      <el-tooltip class="item" effect="dark" content="点击展示居委分布" placement="top-start">
      <div class="jw" @click="jwshowhandle">
        <span :class="jwshow ? 'active' : ''"></span>
      </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import map from "../../assets/map";
export default {
  name: "bottomBtn",
  data() {
    return {
      jwshow: false,
      labelarr: [],
    };
  },
  mounted() {},
  methods: {
    jwshowhandle() {
      if (!this.jwshow) {
        this.jwshow = true;
        map.showOrfalseBm(false);
        axios.get("./static/jw_yuyuan.json").then((res) => {
          let _data = res.data.features;
          let _obj = {};
          for (let i = 0, l = _data.length; i < l; i++) {
            let _lat = 0,
              _lng = 0,
              len = _data[i].geometry.coordinates[0].length;
            for (let k = 0; k < len; k++) {
              _lat += _data[i].geometry.coordinates[0][k][1];
              _lng += _data[i].geometry.coordinates[0][k][0];
            }
            _obj[_data[i].properties.JWMC] = [_lng / len, _lat / len];
          }
          let colorList = [
            "#00FFEA",
            "#ff9676",
            "#00C6FF",
            "#1c7887",
            "#0090FF",
            "#0078FF",
            "#e31102",
            "#9e9c83",
            "#3C00FF",
            "#6500FF",
            "#FFE65C",
            "#a12f2f",
            "#752423",
            "#14446a",
            "#b3a896",
            "#de7d2c",
            "#6e7049",
          ];
          let me = this;
          map.Create_3DPloygon(
            tedp.webGis,
            _obj,
            "./static/jw_yuyuan.json",
            colorList,
            _obj,
            function (data) {
              me.labelarr = data;
            }
          );
        });
      } else {
        this.jwshow = false;
        map.showOrfalseBm(true);
        for (var i = 0; i < this.labelarr.length; i++) {
          this.labelarr[i].show = false;
        }
        for (
          var i = 0, l = tedp.webGis.dataSources._dataSources.length;
          i < l;
          i++
        ) {
          tedp.webGis.dataSources.remove(tedp.webGis.dataSources.get(0));
        }
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bottomBtn {
  width: 200px;
  height: 85px;
  position: absolute;
  top: 950px;
  left: 1860px;
  z-index: 999;
  cursor: pointer;
}
.jw span {
  display: inline-block;
  width: 85px;
  height: 85px;
  background-image: url(~@/assets/image/map/HousingCommittee.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.jw .active {
  background-image: url(~@/assets/image/map/HousingCommittee-active.png);
}
</style>
 